<template>
  <div v-loading="loading">
    <div class="text-muted border rounded bg-light p-3 mb-3">
      合同重做说明:
      <div class="font-weight-bold text-warning">
        <div><small>1、重做合同中的签署方需重新签署。</small></div>
        <div>
          <small>
            2、选择需要重做的合同，填入重做原因保存后才在对应委托合同或反担保合同内修改合同。
          </small>
        </div>
      </div>

      <div v-if="!contracts.length" class="text-danger">请先添加合同</div>
    </div>
    <div class="mb-2">
      <el-button @click="getData()" icon="el-icon-refresh" :loading="loading">刷新</el-button>
    </div>
    <div v-for="(p, index) of contracts" :key="index" class="p-1">
      <div>
        <el-checkbox v-model="p.checked">{{ p.label }}</el-checkbox>
        <el-button size="mini" @click="handleView(p)">查看合同</el-button>
      </div>

      <div v-if="p.checked">
        <el-input type="textarea" v-model="p.re_sign_des" placeholder="合同重签原因"></el-input>
      </div>
    </div>

    <div class="mt-5">
      <el-button class="btn-long" type="primary" @click="submit">提交</el-button>
    </div>

    <el-dialog
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <pdf-view
        :contract-id="docId"
        :query-id="queryId"
        :sig-no="signNo"
        :view-mode="true"
      ></pdf-view>
    </el-dialog>
  </div>
</template>

<script>
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
import { mapGetters } from 'vuex'
export const enumContractType = {
  1: '保证担保',
  2: '质押合同',
  3: '抵押合同',
  4: '留置协议',
}

export default {
  props: {
    queryId: String,
  },
  components: {
    PdfView,
  },
  data() {
    return {
      loading: false,
      contracts: [],
      docId: '',
      signNo: '',
      viewVisible: false,
    }
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['guardDatas', 'user', 'entrustContract']),
  },
  created() {},
  methods: {
    handleView(p) {
      this.docId = p.doc_id
      this.signNo = p.sign_no
      this.viewVisible = true
    },
    getData() {
      if (!this.queryId) {
        return
      }
      this.contracts = []
      this.loading = true
      Promise.all([
        this.$store.dispatch('getEntrustContract', this.queryId),
        this.$store.dispatch('getGuardsData', this.queryId),
      ])
        .then(() => {
          const entrustContract = this.entrustContract || {}

          if (entrustContract.entrust_contract_id && entrustContract.sign_no) {
            this.contracts.push({
              label: '委托合同',
              sign_no: entrustContract.sign_no,
              doc_id: entrustContract.doc_id,
              related_id: entrustContract.entrust_contract_id,
              sign_no_type: 1,
              re_sign_des: '',
              checked: false,
            })
          }

          for (let p of this.guardDatas) {
            if (p.sign_no) {
              this.contracts.push({
                label: `${enumContractType[p.gua_method]}-${p.gua_entity}`,
                sign_no: p.sign_no,
                doc_id: p.doc_id,
                related_id: p.gua_contract_id,
                sign_no_type: 2,
                re_sign_des: '',
                checked: false,
              })
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    submit() {
      const data = []
      for (let p of this.contracts) {
        if (p.checked && !p.re_sign_des) {
          return this.$message.warning(`请输入${p.label}的原因`)
        }
        if (p.checked) {
          data.push({
            sign_no: p.sign_no,
            doc_id: p.doc_id,
            related_id: p.related_id,
            sign_no_type: p.sign_no_type,
            re_sign_des: p.re_sign_des,
            re_sign_person: this.user.realName,
            re_sign_time: this.$utils.dateFormat(new Date()),
            customer_related_id: this.queryId,
            is_re_sign_dir: 0,
          })
        }
      }
      if (!data.length) {
        return this.$message.warning('请先选择需要重做的合同')
      }

      for (let p of data) {
        if (!p.re_sign_des) {
          return this.$message.warning(
            `请填写${enumContractType[p.gua_method]}-${p.gua_entity}的原因`
          )
        }
      }
      this.$utils
        .msgbox({
          message: `确定重做所选择的合同？`,
          beforeClose: () => this.$api.addBatch('credit', 're_sign_record', data),
        })
        .then(() => {
          this.$message.success('提交成功！')
          this.handleSuccess()
        })
        .catch(() => this.$message.error(`操作失败，请重试！`))
    },

    handleSuccess() {
      this.getData()
      this.$emit('success', true)
    },
  },
}
</script>
<style lang="scss" scoped></style>
